<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书发布器 - 示例应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: linear-gradient(135deg, #ff6b7d 0%, #ff8a95 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 90%;
            max-width: 800px;
            min-height: 600px;
        }

        .header {
            background: linear-gradient(45deg, #ff6b7d, #fe5577);
            color: white;
            padding: 2rem;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .content {
            padding: 2rem;
        }

        .section {
            margin-bottom: 2rem;
        }

        .section h2 {
            color: #333;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 0.5rem;
        }

        .step {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .step h3 {
            color: #495057;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }

        .step-number {
            background: #ff6b7d;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
            font-size: 0.9rem;
            font-weight: bold;
        }

        .btn {
            background: linear-gradient(45deg, #ff6b7d, #fe5577);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            margin-right: 1rem;
            margin-bottom: 0.5rem;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(255, 107, 125, 0.3);
        }

        .btn-secondary {
            background: linear-gradient(45deg, #6c757d, #495057);
        }

        .btn-success {
            background: linear-gradient(45deg, #28a745, #20c997);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #495057;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1rem;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 80px;
        }

        .status {
            padding: 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .status-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .accounts-list {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .account-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .account-info {
            flex: 1;
        }

        .account-name {
            font-weight: 600;
            color: #333;
        }

        .account-meta {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📍 小红书发布器</h1>
            <p>模块集成示例 - 快速体验自动化发布功能</p>
        </div>

        <div class="content">
            <!-- 状态显示 -->
            <div id="status" class="status status-info">
                📦 模块加载中，请稍候...
            </div>

            <!-- 第一步：账号设置 -->
            <div class="section">
                <h2>第一步：设置小红书账号</h2>
                
                <div class="step">
                    <h3>
                        <span class="step-number">1</span>
                        获取账号 Cookie
                    </h3>
                    <p>点击下方按钮打开小红书登录页面，登录后获取认证信息</p>
                    <button class="btn" onclick="openXiaohongshuLogin()">
                        🔐 打开小红书登录
                    </button>
                    <button class="btn btn-secondary" onclick="getCookies()">
                        🍪 获取 Cookies
                    </button>
                </div>

                <div class="step">
                    <h3>
                        <span class="step-number">2</span>
                        保存账号信息
                    </h3>
                    <div class="form-group">
                        <label for="accountId">账号ID</label>
                        <input type="text" id="accountId" class="form-control" placeholder="请输入唯一的账号标识，如：my_xiaohongshu_001">
                    </div>
                    <div class="form-group">
                        <label for="accountName">账号名称</label>
                        <input type="text" id="accountName" class="form-control" placeholder="请输入账号显示名称">
                    </div>
                    <button class="btn btn-success" onclick="saveAccount()">
                        💾 保存账号
                    </button>
                </div>

                <div class="step">
                    <h3>
                        <span class="step-number">3</span>
                        已保存的账号
                    </h3>
                    <div id="accountsList" class="accounts-list">
                        <p>暂无账号，请先添加账号</p>
                    </div>
                    <button class="btn btn-secondary" onclick="loadAccounts()">
                        🔄 刷新账号列表
                    </button>
                </div>
            </div>

            <!-- 第二步：发布内容 -->
            <div class="section">
                <h2>第二步：发布内容测试</h2>
                
                <div class="step">
                    <h3>
                        <span class="step-number">4</span>
                        填写发布内容
                    </h3>
                    
                    <div class="form-group">
                        <label for="selectAccount">选择账号</label>
                        <select id="selectAccount" class="form-control">
                            <option value="">请先添加账号</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="contentTitle">内容标题</label>
                        <input type="text" id="contentTitle" class="form-control" placeholder="请输入内容标题">
                    </div>
                    
                    <div class="form-group">
                        <label for="contentDescription">内容描述</label>
                        <textarea id="contentDescription" class="form-control" placeholder="请输入内容描述"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="contentTags">标签</label>
                        <input type="text" id="contentTags" class="form-control" placeholder="请输入标签，用逗号分隔">
                    </div>
                    
                    <div class="form-group">
                        <label for="fileUrl">文件地址</label>
                        <input type="url" id="fileUrl" class="form-control" placeholder="请输入图片的URL地址">
                    </div>
                    
                    <button class="btn btn-success" onclick="publishContent()">
                        🚀 开始自动发布
                    </button>
                </div>
            </div>

            <!-- 第三步：查看记录 -->
            <div class="section">
                <h2>第三步：发布记录</h2>
                
                <div class="step">
                    <h3>
                        <span class="step-number">5</span>
                        发布历史
                    </h3>
                    <div id="recordsList">
                        <p>暂无发布记录</p>
                    </div>
                    <button class="btn btn-secondary" onclick="loadRecords()">
                        📊 查看发布记录
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="renderer.js"></script>
</body>
</html>
